<template>
	<view class="main">
		<view>
			<u--form labelPosition="left" :model="model" :rules="rules" ref="form" labelWidth="180" labelAlign="left"
				:labelStyle="{marginLeft: '10px',fontSize: '30rpx',color: '#1D2129',height:'96rpx',lineHeight:'96rpx'}"
				:borderBottom="true">
				<u-form-item label="姓名" prop="userName" required borderBottom>
					<u--input v-model="model.userName" border="none" placeholder="请输入姓名">
					</u--input>
				</u-form-item>
				<u-form-item label="联系方式" prop="mobile" required borderBottom>
					<u--input v-model="model.mobile" border="none" placeholder="请输入联系方式">
					</u--input>
				</u-form-item>
				<u-form-item label="入住时间" prop="inTime" required borderBottom>
					<text @click="datetimeToggle('inTime')">{{model.inTime || "点击选择入住时间"}}</text>
				</u-form-item>
				<u-form-item label="离开时间" prop="outTime" required borderBottom>
					<text @click="datetimeToggle('outTime')">{{model.outTime || "点击选择离开时间"}}</text>
				</u-form-item>
				<u-form-item label="价格" prop="price" borderBottom>
					<u--input v-model="model.price" border="none" placeholder="请输入价格">
					</u--input>
				</u-form-item>
				<u-form-item label="办理人" prop="handleUser" borderBottom>
					<u--input v-model="model.handleUser" border="none" placeholder="请输入办理人">
					</u--input>
				</u-form-item>
				<u-form-item label="预约餐厅" prop="diningTime" borderBottom>
					<text @click="datetimeToggle('diningTime')">{{model.diningTime || "点击选择预约日期"}}</text>
				</u-form-item>
				<u-form-item label="备注" prop="remark" borderBottom>
					<u--input v-model="model.remark" border="none" placeholder="请输入备注">
					</u--input>
				</u-form-item>
				<u-form-item label="入驻状态" prop="rvState" borderBottom>
					<u-radio-group v-model="model.rvState" size="36rpx" iconSize="24rpx">
						<u-radio :customStyle="{marginRight: '16rpx'}" v-for="(item, index) in rvStateList" :key="index"
							:label="item.label" :name="item.value" labelSize="28rpx">
						</u-radio>
					</u-radio-group>
				</u-form-item>
			</u--form>
		</view>
		<view class="submitWp bottomBar">
			<u-button @click="cancle">取消</u-button>
			<u-button @click="submit" :throttleTime="1000" color="#276aee" :loading="loading">保存</u-button>
		</view>

		<u-datetime-picker :value="formatTime(model.inTime)" :show="inTimeShow" mode="datetime" :itemHeight="88"
			@confirm="datetimeConfirm($event,'inTime','yyyy-MM-dd hh:mm')"
			@cancel="datetimeToggle('inTime')"></u-datetime-picker>
		<u-datetime-picker :value="formatTime(model.outTime)" :show="outTimeShow" mode="datetime" :itemHeight="88"
			@confirm="datetimeConfirm($event,'outTime','yyyy-MM-dd hh:mm')"
			@cancel="datetimeToggle('outTime')"></u-datetime-picker>
		<u-datetime-picker :value="formatTime(model.diningTime)" :show="diningTimeShow" mode="date" :itemHeight="88"
			@confirm="datetimeConfirm($event,'diningTime','yyyy-MM-dd')"
			@cancel="datetimeToggle('diningTime')"></u-datetime-picker>

		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import CommonJS from '@/common/libs/common.js'

	export default {
		data() {
			const that = this
			return {
				model: {
					inTime: null
				},
				rules: {
					userName: [{
						required: true,
						message: '请输入姓名',
						trigger: ['change', 'blur'],
					}, ],
					mobile: [{
						required: true,
						message: '请输入联系方式',
						trigger: ['change', 'blur'],
					}],
					inTime: [{
						required: true,
						message: '请选择入住时间',
					}, {
						validator: (rule, value, callback) => that.validatorTime(rule, value, callback)
					}],
					outTime: [{
						required: true,
						message: '请选择离开时间',
						trigger: ['change', 'blur'],
					}, {
						validator: (rule, value, callback) => that.validatorTime(rule, value, callback)
					}],
				},
				rvStateList: [{
					value: 0,
					label: '未使用'
				}, {
					value: 1,
					label: '已入住'
				}, {
					value: 2,
					label: '已离开'
				}],
				inTimeShow: false,
				outTimeShow: false,
				diningTimeShow: false,

				loading: false,
			}
		},
		onLoad(option) {
			this.model.id = option.id
			this.getDBDetail()
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			async getDBDetail() {
				let params = {
					id: this.model.id
				}
				this.$api.getRvApplyRecord(params).then(res => {
					if (res.success) {
						this.model = res.result
					}
				})
			},
			async submit() {
				this.$refs.form.validate().then(async () => {
					this.loading = true
					let res = await this.$api.rvApplyRecordEdit(this.model)
					this.loading = false
					this.$refs.uToast.show({
						message: res.message,
					})
					if (res.success) {
						let pages = getCurrentPages(); // 获取当前页面栈
						let prePage = pages[pages.length - 2]; // 上一个页面
						prePage.refresh = true // A 页面 init方法 为true

						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					}
				})
			},
			cancle() {
				uni.navigateBack()
			},
			datetimeToggle(type) {
				this[`${type}Show`] = !this[`${type}Show`]
			},
			datetimeConfirm(e, type, fmt) {
				this.$set(this.model, type, CommonJS.formatTimestamp(e.value, fmt))
				this.datetimeToggle(type)

				if (type === 'inTime' || type === 'outTime') {
					this.$refs.form.validateField('inTime')
					this.$refs.form.validateField('outTime')
				}
			},
			formatTime(value) {
				let tValue = (value || '').replace(/\-/g, '/')
				if (tValue && uni.$u.test.date(tValue)) {
					return (new Date(tValue)).getTime()
				} else {
					return Date.now()
				}
			},
			validatorTime(rule, value, callback) {
				if (Date.parse(this.model.inTime) > Date.parse(this.model.outTime)) {
					callback('离开时间不能在入住时间之前！')
				} else {
					callback()
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		padding-bottom: 200rpx;
	}

	.submitWp {
		position: fixed;
		bottom: 30rpx;
		left: 30rpx;
		right: 30rpx;
		z-index: 9;
		background-color: #fff;
		box-sizing: border-box;

		display: flex;
		justify-content: center;
		align-items: center;
		gap: 30rpx;
	}

	::v-deep .u-form-item__body__left__content__label {
		font-weight: 600 !important;
	}

	::v-deep .u-form-item__body {
		padding: 10rpx 0 !important;
	}
</style>
